<!DOCTYPE html>
<html>

<head>
    <style>
        div >div{
            display: inline-block;
        }
        #content div:first-of-type {
            background-color: rgb(8, 160, 248);
            
            width: 8em;
            height: 8em;
            line-height: 8em;
            text-align: center;
            border-radius: 4em;
            text-transform: uppercase;
            color: white;
            font-weight: bold;
            /* padding-top: -0.5em;
            text-transform: uppercase;
            border-radius: 4em;
            width: 0;
            height: 0;
            border: 4em solid rgb(0, 162, 255);
            text-indent: -2em;
            line-height: 4em; */
        }

        #content div:nth-of-type(2){
            width: 0;
            height: 0;
            /* line-height: 4em;  */
            /* text-align: center; */
            text-indent: -2em;
            border: 4em solid #eee;
            border-left-color: aqua;
            border-top-color: bisque;
            border-right-color: #eee;
            border-bottom-color: blue;

        }


        #content div:nth-of-type(3){
            width: 4em;
            height: 4em;
            line-height: 4em;
            text-align: center;
            border: 2em solid red;
            border-radius: 4em;

        }

        
    </style>
</head>

<body>
    <div id="content">
        <h1>CSS TEMPLATES using border radius</h1>
        <div>Blue</div>
        <div><span class="text">TRIANGLE</span></div>
        <div>Red</div>
    </div>
</body>

</html>